var incomeGrid = {
    getIncomesToJsonJqGrid: function(options)
    {
        jQuery("#list").jqGrid({ 
            url: options.url, 
            height: "auto", 
            datatype: "json", 
            colNames:['Id', 'Amount', 'Comment', 'Created', 'Actions'],
            colModel:[ 
                {name:'id', index:'i.id', width:55, hidden: true}, 
                {name:'amount', index:'i.amount', width:80, editable:true, sorttype:'integer'}, 
                {name:'comment', index:'i.comment', width:180, editable:true, sorttype:'string'}, 
                {name:'date_created', index:'i.date_created', width:80, editable:true, sorttype:'string', editoptions:{
                    dataInit:function(el){ 
                        $(el).datetimepicker({"format": "dd.mm.yyyy", "pickerPosition": "bottom-left", "minView": "month"});
                    }
                }}, 
                {name:'act',index:'act', width:50,sortable:false}
            ],
            gridComplete: function() { 
                var ids = jQuery("#list").jqGrid('getDataIDs'); 
                for (var i=0;i < ids.length;i++) { 
                    var cl = ids[i]; 
                    var btnEdit, btnCancle, btnDel, btnSave = '';
                    btnEdit   = "<span class=\"glyphicon glyphicon-edit grid-icon btn-edit\" title=\"Edit\" onclick=\"jQuery('#list').editRow('" + cl + "');\"></span>"; 
                    btnSave   = "<span class=\"glyphicon glyphicon-floppy-save grid-icon btn-save\" title=\"Save\" onclick=\"jQuery('#list').saveRow('" + cl + "');\"></span>"; 
                    btnCancle = "<span class=\"glyphicon glyphicon-floppy-remove grid-icon btn-cancle\" title=\"Cancel\" onclick=\"jQuery('#list').restoreRow('" + cl + "');\"></span>"; 
                    btnDel    = "<span class=\"glyphicon glyphicon-remove-circle grid-icon del-row\" title=\"Delete\" date=\"" + cl + "\"></span>";
                    jQuery("#list").jqGrid('setRowData',ids[i],{act: btnEdit + btnSave + btnCancle + btnDel}); 
                }
                $('.btn-save').hide();
                $('.btn-cancle').hide();
            },
            
            gridview: true,
            sortname: 'i.date_created', 
            viewrecords: true, 
            editurl: options.url_edit,
            sortorder: "desc"
        }); 
        jQuery("#list").jqGrid('navGrid' ,'#pager' ,{edit:false, add:false, del:false});
        
        $('body').on('click', '.btn-edit', function() {
            $(this).parent('td').find('.btn-edit').hide();
            $(this).parent('td').find('.del-row').hide();
            $(this).parent('td').find('.btn-save').show();
            $(this).parent('td').find('.btn-cancle').show();       
        });
       
        $('body').on('click', '.btn-save', function() {
            showIcon(this);
            incomeChart.refresh('chart1', options.url_data);
        });
        
        $('body').on('click', '.btn-cancle', function() {
            showIcon(this);
        });
        
        function showIcon(e) {
            $(e).parent('td').find('.btn-save').hide();
            $(e).parent('td').find('.btn-cancle').hide();
            $(e).parent('td').find('.btn-edit').show();
            $(e).parent('td').find('.del-row').show();
        }
        
        $('body').on('click', '.del-row', function() {
            if (confirm('Are you sure you want to delete this income?')) {
                var id = $(this).attr('date');
                $.ajax({
                    url: options.url_del, 
                    async: false,
                    type: 'post',
                    data: { id: id},
                    success: function(data) 
                     {
                       if (data === 'TRUE')  {
                            $('#list').trigger("reloadGrid"); 
                            incomeChart.refresh('chart1', options.url_data);
                       }
                     }
                });
            }
        });    
    }
}
